// 表格查询
var vm = new Vue({
    el: '#app',
    data: {
        list: '',
        num: 1,
        key: '',
        saleable: ''
    },
    methods:{
        getGoods(){

            $.ajax({
                url: 'goods/queryGoods',
                data: {
                    key: this.key,
                    saleable: this.saleable
                },
                success: function (res) {

                    vm.list = res.list;
                    vm.num = 1;

                    //bootstrap 分页
                    var options = {
                        bootstrapMajorVersion: 3,
                        currentPage: res.page,
                        totalPages: res.totalPage,
                        size: "normal",
                        alignment: "center",
                        itemTexts:function(type,page, current){
                            switch (type) {
                                case "first":
                                    return "首页";
                                case "prev":
                                    return "上一页";
                                case "next":
                                    return "下一页";
                                case "last":
                                    return "尾页";
                                case "page":
                                    return page;
                            }
                        },
                        onPageClicked: function (event, originalEvent, type, page) {

                            $.ajax({
                                url:'/goods/queryGoods', //点击分页提交当前页码
                                data:{
                                    page: page
                                },
                                success:function(data){
                                    vm.list = data.list;
                                    vm.num = (page -1) * 15 + 1;
                                }
                            })
                        }
                    };

                    $("#page").bootstrapPaginator(options);


                }
            });
        },
        getSaleable1(){
            var selectedColor = $("#saleable1").val();

            this.saleable = selectedColor;

            this.getGoods();
        },
        getSaleable2(){
            var selectedColor = $("#saleable2").val();

            this.saleable = selectedColor;

            this.getGoods();
        },
        getSaleable3(){
            var selectedColor = $("#saleable3").val();

            this.saleable = selectedColor;

            this.getGoods();
        }
    },
    watch:{
        key(){

            this.getGoods();
        }
    },
    created(){
        this.getGoods();
    },
});